﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sortable</title>
    <!-- Script -->
    <script src="script/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="script/ui.core.js" type="text/javascript"></script>
    <script src="script/ui.sortable.js" type="text/javascript"></script>
    
    <style type="text/css">
	#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
	#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	li 
	{ 
	    margin: 0 3px 3px 3px; 
	    padding: 0.4em; 
	    padding-left: 1.5em; 
	    font-size: 1em; 
	    height: 18px; 
	    border:dashed 1px #000;
	    background-color:#ccc;
	}
	</style>

	<script type="text/javascript">
	    $(function() {
            $("#sortable1, #sortable2").sortable({
                connectWith: '.connectedSortable'
            }).disableSelection();
	    });
	</script>
</head>
<body>
    <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>

    <ul id="sortable2" class="connectedSortable">
        <li class="ui-state-highlight">Item 1</li>
        <li class="ui-state-highlight">Item 2</li>
        <li class="ui-state-highlight">Item 3</li>
        <li class="ui-state-highlight">Item 4</li>
        <li class="ui-state-highlight">Item 5</li>
    </ul>
</body>
</html>
